<template>


  <div class="music">
    <div class="portrait" ref="portrait">
      <img :src="musicIndex.photo" alt="加载失败" v-if="musicIndex">
    </div>
    <div class="musicMessage" v-if="musicIndex">
      <p>{{musicIndex.song}}</p>
      <p>歌手:{{musicIndex.singer}}</p>
      <p>专辑:{{musicIndex.album}}</p>
      <p>
        <span @click="like(musicIndex)" :style="{color : musicIndex.like ? 'red' : 'white',cursor:'pointer'}">❤</span>喜欢
      </p>
    </div>
    <div class="song">
      <!--控制器-->
      <div class="controls">

        <!--暂停和快进快退-->
        <div class="list_1">
          <i class="iconfont icon-047caozuo_shangyishou" @click="prev"></i>
          <i :class="['iconfont',playClass]" @click="playMusic"></i>
          <i class="iconfont icon-49xiayishou" @click="next"></i>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import {mapState, mapGetters} from 'vuex'

  export default {
    name: "Music",
    data() {
      return {
        index: 0,
        playClass: 'icon-zanting',
      }
    },
    created() {
      this.getMusic()
    },
    methods: {
      getMusic() {
        this.$store.dispatch('getMusic')
      },  //获取音乐信息
      playMusic() {
        if (this.$store.state.paused) {
          this.plays()
        } else {
          this.pauses()
        }
      },  //播放音乐
      next() {
        if (this.index < this.$store.state.music.length - 1) {
          this.index++
        } else {
          this.index = 0
        }
        this.$store.state.index = this.index
        this.$nextTick(() => {
          this.plays()
        })
      },  //下一首
      prev() {
        if (this.index > 0) {
          this.index--
        } else {
          this.index = this.$store.state.music.length - 1
        }
        this.$store.state.index = this.index
        this.$nextTick(() => {
          this.plays()
        })
      },  //上一首
      like(musicIndex) {
        if (this.$store.getters.jurisdiction) {
          musicIndex.like = !musicIndex.like
          this.$store.dispatch('getMusicLike', {
            id: musicIndex._id,
            like: musicIndex.like
          })
        } else {
          this.$message.info('管理员才可以的操作哦!')
        }
      },  //修改喜欢
      plays() {
        this.$music.src = this.$store.getters.musicIndex.music
        this.$music.play()
        this.playClass = 'icon-zanting1'
        this.$refs.portrait.style.animationPlayState = 'running'
        this.$store.state.paused = false
      },  //播放
      pauses() {
        this.$music.pause()
        this.playClass = 'icon-zanting'
        this.$refs.portrait.style.animationPlayState = 'paused'
        this.$store.state.paused = true
      },  //暂停
    },
    computed: {
      ...mapState(['music']),
      ...mapGetters(['musicIndex'])
    }
  }
</script>

<style scoped lang="less">

  .music {
    width: 300px;
    background: #181818;
    box-shadow: 0 1px 1px #3D3D3D,0 -1px 1px #000;
    margin-top: 20px;
    padding: 20px 0 10px 20px;
    overflow: hidden;

    .portrait {
      width: 80px;
      height: 80px;
      float: left;
      border-radius: 50%;
      animation: musicPlay 10s linear infinite;
      animation-play-state: paused;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    @keyframes musicPlay {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    .musicMessage {
      float: left;
      padding-left: 20px;

      p {
        line-height: 20px;
      }
    }

    .song {
      width: 100%;
      overflow: hidden;
    }
  }

  .controls {
    width: 100%;
    padding-top: 10px;
    display: flex;
    padding-right: 20px;

    .list_1 {
      flex: 3;
      display: flex;
      justify-content: space-around;
    }
  }


</style>
